<template>
    <view class="type-writer-container">
        <div v-html="contentText"></div>
    </view>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';

const props = defineProps({
  contentList: {
    type: Array,
    required: true
  },
  delaytime: {
    type: Number,
    default: 0
  },
  uid: {
    type: [String, Number]
  }
});

const contentText = ref('');

onMounted(() => {
  initWriter(props.contentList);
});

watch(props.contentList, (newvalue) => {
  initWriter(newvalue);
});

function initWriter(messageList: any[]) {
  //const text = messageList.join('<br>');
  const text = messageList.join('');
  contentText.value = text;
}

// function getChatContent(text: string) {
//   timer = setInterval(() => {
//     initPosition.value++;
//     if (initPosition.value == total.value) {
//       let nowStr = text.substring(0, initPosition.value);
//       contentText.value = nowStr;
//       clearInterval(timer);
//       emit('finish', props.uid, true);
//       return;
//     }

//     let nowStr = text.substring(0, initPosition.value);
//     contentText.value = nowStr;
//   }, 10);
// }

</script>

<style scoped lang="scss">
.type-writer-container {
	width: 100%;
	height: auto;
}
</style>